{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}wysihtml5 - Advanced Demo{% endblock %}
{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/editors/wysihtml5/style.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/editors/wysihtml5/dist/wysihtml5-0.4.0pre.js') }}" type="text/javascript"></script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
        
        	<div class="col-lg-12">
        	    <h1 class="page-header">wysihtml5 - Advanced Editor Example</h1>
				<form>
				    <div id="toolbar" style="display: none;">
					    <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |
					    <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> |
					    <a data-wysihtml5-command="createLink">insert link</a> |
					    <a data-wysihtml5-command="insertImage">insert image</a> |
					    <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a> |
					    <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> |
					    <a data-wysihtml5-command="insertUnorderedList">insertUnorderedList</a> |
					    <a data-wysihtml5-command="insertOrderedList">insertOrderedList</a> |
					    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a> |
					    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a> |
					    <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a> |
					    <a data-wysihtml5-command="undo">undo</a> |
					    <a data-wysihtml5-command="redo">redo</a> |
					    <a data-wysihtml5-command="insertSpeech">speech</a>
					    <a data-wysihtml5-action="change_view">switch to html view</a>
					    
					    <div data-wysihtml5-dialog="createLink" style="display: none;">
					      <label>
					        Link:
					        <input data-wysihtml5-dialog-field="href" value="http://">
					      </label>
					      <a data-wysihtml5-dialog-action="save" class="btn btn-primary btn-sm">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel" class="btn btn-primary btn-sm">Cancel</a>
					    </div>
					    
					    <div data-wysihtml5-dialog="insertImage" style="display: none;">
					      <label>
					        Image:
					        <input data-wysihtml5-dialog-field="src" value="http://">
					      </label>
					      <label>
					        Align:
					        <select data-wysihtml5-dialog-field="className">
					          <option value="">default</option>
					          <option value="wysiwyg-float-left">left</option>
					          <option value="wysiwyg-float-right">right</option>
					        </select>
					      </label>
					      <a data-wysihtml5-dialog-action="save" class="btn btn-primary btn-sm">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel" class="btn btn-primary btn-sm">Cancel</a>
					    </div>
				    
				    </div>
				    <div class="form-group">
				        <textarea id="textarea" class="text" placeholder="Enter text ..."></textarea>
				    </div>
				    <button type="reset" class="btn btn-primary">Reset form!</button>
				</form>
        	</div>
        
        </div>

    </div> <!-- /container -->
    
    <script src="{{ asset('bundles/applicationbootstrap/js/editors/wysihtml5/setting/advanced.js') }}" type="text/javascript"></script>
    
    <script type="text/javascript">
	  	var editor = new wysihtml5.Editor("textarea", {
	    	toolbar:        "toolbar",
	    	stylesheets:    "{{ asset('bundles/applicationbootstrap/css/editors/wysihtml5/stylesheet.css') }}",
	    	parserRules:    wysihtml5ParserRules
	  	});
    </script>
    
{% endblock %}